<template>
	<view class="content">
		<view class="title">{{formdata.company}}疫情打卡系统</view>
		<view class="sub-title">用于疫情防控期间公司人员行程动态打卡</view>
		<view class="form-group">
			<view class="form-line">
				<view class="form-line-title info">基本信息</view>
			</view>
			<view class="form-line">
				<view class="form-line-title">所属单位</view>
				<view class="form-line-content">
					<input v-model="formdata.company" :disabled="true" />
				</view>
			</view>
			<view class="form-line">
				<view class="form-line-title">部门</view>
				<view class="form-line-content">
					<input v-model="formdata.depname" :disabled="true" />
					<!-- 	<uni-data-picker @change="selectDept" placeholder="请选择部门" popup-title="请选择部门" :localdata="deptArr"
						v-model="formdata.depname">
					</uni-data-picker> -->
				</view>
			</view>
			<view class="form-line">
				<view class="form-line-title">姓名</view>
				<view class="form-line-content">
					<input v-model="formdata.username" placeholder="填写本人姓名" disabled />
				</view>
			</view>
			<view class="form-line">
				<view class="form-line-title">联系电话</view>
				<view class="form-line-content">
					<input v-model="formdata.tel" placeholder="填写电话号码" />
				</view>
			</view>
			<view class="form-line">
				<view class="form-line-title info">动态信息</view>
			</view>
			<!-- <view class="form-line">
				<view class="form-line-title">体温·1</view>
				<view class="form-line-content">
					<input v-model="formdata.temperature1" placeholder="填写体温" />
				</view>
			</view> -->
			<view class="form-line">
				<view class="form-line-title">健康码照片</view>
				<view class=" uploadCon" @click="tapUpload(1)">
					<u-icon v-if="formdata.healthcodeimg==''" name="photo" size="40"></u-icon>
					<image v-else :src="'https://api.zlkj-port.com/yqapi/ITally'+formdata.healthcodeimg" mode=""
						style="width: 100%;height: 100%;"></image>
				</view>
			</view>
			<view class="form-line">
				<view class="form-line-title">行程码照片</view>
				<view class="uploadCon" @click="tapUpload(2)">
					<u-icon v-if="formdata.travelcodeimg==''" name="photo" size="40"></u-icon>
					<image v-else :src="'https://api.zlkj-port.com/yqapi/ITally'+formdata.travelcodeimg" mode=""
						style="width: 100%;height: 100%;"></image>
				</view>
			</view>
			<view class="form-line">
				<button class="position-btn" type="default" @tap="getLocation">获取当前位置</button>
			</view>
			<view class="form-line">
				<view class="form-line-title info">
					承诺信息<br /><br />
					本人承诺在疫情防控期间，不主动前往中高风险地区，不主动接触中高风险地区人员，落实好个人防护，如自身体感异常，体温超过37.3以上的情况，第一时间上报所在部门领导并上报公司安全环保部。<br />
					以上填报信息及位置真实有效，如有虚假愿意承担相关法律责任。
				</view>
			</view>
			<view class="form-line">
				<view class="form-line-title">承诺人</view>
				<view class="form-line-content"></view>
			</view>
			<view class="form-line">
				<view class="paint-box">
					<view class="box">
						<Signature ref="sig" v-model="formdata.img" style="width: 100%;height: 100%;"></Signature>
					</view>
					<button class="clear-btn" @tap="clearSig">清空</button>
				</view>
			</view>
			<button class="submit-btn" @tap="submit">提交</button>
			<view class="footer">
				Copyright © 2022 苏州众联智港信息科技有限公司
			</view>
		</view>
	</view>
</template>

<script>
	import QQMapWX from '@/common/qqmap-wx-jssdk.min.js'
	// import QQMapWX from '@/common/qqmap-wx-jssdk.js'
	import Signature from '@/components/sin-signature/sin-signature.vue'
	import {
		mapState
	} from 'vuex'
	import uniDataPicker from '@/components/uni-data-picker/components/uni-data-picker/uni-data-picker.vue'

	export default {
		data() {
			return {
				deptArr: [],
				deptIndex: -1,
				formdata: {
					company: '',
					depname: '',
					username: '',
					tel: '',
					address: '',
					img: '',
					wechatid: '',
					P: '',
					C: '',
					A: '',
					healthcodeimg: "",
					travelcodeimg: ""
				},
				v: '',
				recordStatus: false, // 是否可以保存记录
				portName: '',
				userInfo: {},
			}
		},
		computed: {
			...mapState(['listDptUrl', 'listUserUrl', 'saveRecord', 'listUserInfo', 'listRecordStatus', 'listUserTel'])
		},
		components: {
			Signature,
			uniDataPicker
		},
		watch: {
			portName(nval, oval) {
				if (nval == 'szgj') {
					this.formdata.company = '苏中国际'
				}
				if (nval == 'cygj') {
					this.formdata.company = '长源国际'
				}
			}
		},
		onLoad(options) {
			this.getDeptList()
			this.portName = options['portName']
			this.getuserinfo()
		},
		onShow() {
			wx.hideHomeButton()
		},
		methods: {
			getuserinfo() {
				uni.request({
					url: 'https://api.zlkj-port.com/yqapi/ITally/xhtt/Q/ZnkQyc7xBuC7Qkn?tel=' + uni.getStorageSync(
						"userInfo").mobile + '&comp=苏中国际',
					method: "get",
					success: (res) => {
						this.userInfo = res.data.rows[0]
						this.formdata.company=res.data.rows[0].comp
						this.getUserDefaultInfo()
					}
				})
			},
			tapUpload(type) {
				let that = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success: function(res) {
						console.log(res.tempFilePaths[0])
						uni.uploadFile({
							url: 'https://api.zlkj-port.com/yqapi/ITally/App/fileUpload',
							filePath: res.tempFilePaths[0],
							name: 'file',
							success: (uploadFileRes) => {
								let path = JSON.parse(uploadFileRes.data).filepath
								if (type == 1) {
									that.formdata.healthcodeimg = path
								} else {
									that.formdata.travelcodeimg = path
								}
							}
						});
					}
				});
			},
			getDeptList() {
				// uni.request({
				// 	url: this.listDptUrl
				// }).then(res => {
				// 	let dataArr = res[1].data.rows
				// 	this.deptArr = dataArr.map(item => {
				// 		return {
				// 			'text': item.depname,
				// 			'value': item.depname
				// 		}
				// 	})
				// }).catch(err => {
				// 	console.log(err)
				// })
			},
			selectDept(e) {
				console.log(e)
			},
			async startSign() {
				let s = await this.$refs.sig.getSyncSignature();
				// console.log('组件版本', this.$refs.sig.VERSION);
				// console.log('签名数据', s);
			},
			getLocation() {
				console.log('获取当前位置')
				uni.showLoading({
					title: '定位中'
				})
				let that = this

				uni.getLocation({
					// type: 'wgs84',
					type: 'gcj02',
					success: function(res) {
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
						that.GetNowCityInfo(res)
					},
					fail(err) {
						console.log(err)
						uni.hideLoading()
					}
				})

				// uni.chooseLocation({
				// 	success: (data)=> {
				// 		this.formdata.address = data.address + data.name;
				// 	}
				// })
			},
			GetNowCityInfoByBdMap(lag) {
				let that = this
				// 百度地图API功能
				let map = new BMap.Map("allmap");
				let point = new BMap.Point(res.longitude, res.latitude);
				let gc = new BMap.Geocoder();
				gc.getLocation(point, function(rs) {
					let addComp = rs.addressComponents
					console.log(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp
						.street + ", " + addComp.streetNumber)
					that.formdata.address = addComp.province + ", " + addComp.city + ", " + addComp.district +
						", " + addComp.street + ", " + addComp.streetNumber
				});
			},
			// 获取当前城市信息
			GetNowCityInfo(lag) {
				let that = this
				let qqmapsdk = new QQMapWX({
					key: 'P2KBZ-JMTYD-EPG4J-HCDUW-5652J-WQFYF' //腾讯地图 - 申请开发者密钥（key）
				});
				console.log('location')
				qqmapsdk.reverseGeocoder({
					location: {
						longitude: lag.longitude,
						latitude: lag.latitude
					},
					success(res) {
						console.log('当前位置信息', res)
						if (res.status == 0 && res.message == "query ok") {
							that.formdata.address = res.result.address
							that.formdata.P = res.result.address_component.province
							that.formdata.C = res.result.address_component.city
							that.formdata.A = res.result.address_component.district
						}
						uni.hideLoading()
					},
					fail(err) {
						console.log(err)
						uni.hideLoading()
					}
				})
			},
			clearSig() {
				this.formdata.img = ''
			},
			submit() {
				uni.showLoading({
					title: '提交中'
				})
				if (this.formdata.wechatid == '') {
					let that = this
					uni.login({
						provider: 'weixin',
						success: loginRes => {
							let code = loginRes.code
							console.log(code)
							this.$http.request(this.$httpApi.cloudPortUrl.getSession, {
									code: code
								})
								.then((res) => {
									let data = JSON.parse(res.data)
									this.formdata.wechatid = data.openid
									uni.setStorageSync('zhxg_openid', this.formdata.wechatid)
									if (this.checkForm()) {
										this.commitFormdata()
									}
								})
								.catch(err => {
									console.log(err)
									uni.hideLoading()
									uni.showToast({
										title: '获取用户信息失败',
										duration: 2000,
										icon: 'none'
									})
								})
						}
					});
				} else {
					if (this.checkForm()) {
						this.commitFormdata()
					}
				}
			},
			checkRecordCount() {
				uni.request({
					url: this.listRecordStatus,
					data: {
						'username': this.formdata.username,
						'tel': this.formdata.tel
					},
					success: (result) => {
						if (result.data.total > 0) {
							uni.hideLoading()
							uni.showToast({
								title: '当日已打卡，请勿重复打卡',
								duration: 2000,
								icon: 'none'
							})
						} else {
							this.checkUserWithTel()
						}
					}
				})
			},
			checkUserWithTel() {
				uni.request({
					url: this.listUserTel,
					data: {
						'username': this.formdata.username,
						'tel': this.formdata.tel
					},
					success: (result) => {
						if (result.data.total == 0) {
							uni.hideLoading()
							uni.showToast({
								title: '当前用户不存在，请检查',
								duration: 2000,
								icon: 'none'
							})
						} else {
							this.commitFormdata()
						}
					}
				})
			},
			commitFormdata() {
				uni.request({
					url: "https://api.zlkj-port.com/yqapi/ITally/xhtt/A/pO11LSLevBReewL",
					data: this.formdata,
					method: 'post',
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
						// 'X-Requested-With': 'xmlhttprequest'
					},
					success: (res) => {
						try {
							let code = res.data.code
							if (code == 200) {
								uni.hideLoading()
								uni.showToast({
									title: '打卡成功',
									duration: 2000,
									icon: 'success'
								})
								uni.setStorageSync('zhxg_deptName', this.formdata.depname)
								uni.setStorageSync('zhxg_userName', this.formdata.username)
								uni.setStorageSync('zhxg_tel', this.formdata.tel)
								Object.keys(this.formdata).forEach(key => {
									this.formdata[key] = ''
								})
							}
						} catch (err) {
							console.log(err)
							uni.hideLoading()
							uni.showToast({
								title: '打卡异常',
								duration: 2000,
								icon: 'none'
							})
						}
					},
					fail(err) {
						console.log(err)
					}
				})
			},
			checkForm() {
				let result = true
				Object.keys(this.formdata).forEach(key => {
					if (this.formdata[key] == '') {
						result = false
					}
				})
				if (!result) {
					uni.hideLoading()
					uni.showToast({
						title: '请检查未填写数据',
						duration: 2000,
						icon: 'none'
					})
				}
				return result
			},
			getUserDefaultInfo() {
				// this.formdata.depname = uni.getStorageSync('zhxg_deptName')
				// this.formdata.username = uni.getStorageSync('zhxg_userName')
				// this.formdata.tel = uni.getStorageSync('zhxg_tel')
				// this.formdata.wechatid = uni.getStorageSync('zhxg_openid')
				this.formdata.username = this.userInfo.username
				this.formdata.tel = this.userInfo.tel
				this.formdata.depname=this.userInfo.depname
				this.formdata.wechatid=this.userInfo.wechatid
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 30upx 60upx;
	}

	.title {
		margin-top: 40upx;
		text-align: center;
		font-size: 42upx;
		font-weight: 800;
	}

	.sub-title {
		margin-top: 30upx;
		text-align: center;
		font-size: 24upx;
		color: #333333;
	}

	.form-group {
		margin-top: 30upx;
	}

	.form-line {
		padding: 30upx 0;
		border-bottom: 1px solid #E5E5E5;
		display: flex;
		// justify-content: center;
		align-items: center;
		font-size: 32upx;

		.form-line-title {
			width: 220upx;
			color: #000000;
		}

		.form-line-content {
			flex: 1;
		}

		.uploadCon {
			width: 200rpx;
			height: 200rpx;
			border: 1rpx solid;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.form-line-title.info {
			flex: 1;
			justify-content: flex-start;
			color: #888888;
			font-size: 24upx;
			margin-top: 30upx;
		}

		.paint-box {
			flex: 1;
			justify-content: flex-start;

			.box {
				// height: 250upx;
				border: 1px solid #333333;
				margin-bottom: 15upx;
			}

			.clear-btn {
				margin-left: 0;
				width: 150upx;
				color: #18BC37;
				font-size: 28upx;
			}
		}
	}

	.input-value-border {
		border: 0;
	}

	.position-btn {
		flex: 0.6;
		font-size: 28upx;
		color: #18BC37;
	}

	.submit-btn {
		margin-top: 90upx;
		width: 60%;
		font-size: 28upx;
		background-color: #18BC37;
		color: #ffffff;
	}

	.footer {
		margin-top: 90upx;
		font-size: 20upx;
		text-align: center;
		color: #888888;
	}
</style>
